import type { LineConfig } from '@ant-design/charts';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card } from 'antd';
import React, { useEffect, useState } from 'react';
import Line from './../components/Line';
import { getAttendanceData } from "@/services/ant-design-pro/api";

const Welcome: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [data, setData] = useState();
  useEffect(() => {
   getAttendanceData().then((res) => {
    if (res.success) {
      setData(res.data);
    }
   })
  },[]);
  const config: LineConfig = {
    data,
    xField: 'date', // x轴数据字段
    yField: 'attendance', // y轴数据字段
    xAxis: {
      type: 'date', // 设置x轴为日期类型
      tickCount: 7, // 设置显示的刻度数
    },
    yAxis: {
      label: {
        formatter: (v) => `${v} 天`, // 格式化y轴标签
      },
    },
    smooth: true, // 平滑折线
    color: '#36A2EB', // 折线的颜色
    point: {
      size: 5, // 数据点大小
      shape: 'circle', // 数据点形状
    },
  };
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <Line {...config} />
      </Card>
    </PageContainer>
  );
};

export default Welcome;

